<template lang="html">
    <div class="drink">
        <div class="prolist" v-for="i in drinkData">
            <img v-bind:src="i[0][0].sale_as[0].bannerimg">
            <div class="pro" v-for="m in i[0][1].goodslist">
                <a href="http://m.xuxian.com/goods/getgoodsinfo/5194/welcome">
                    <div class="fl">
                        <div class="wdpro">
                          <img  v-bind:src="m.newimg" class="proImg"/>

                        </div>
                    </div>
                    <div class="fr">
                        <h3>{{m.main_name}}</h3>
                        <h4>{{m.title}}</h4>
                        <div class="jg-bq"><em>会员价:￥<strong>{{m.price}}</strong>/份&nbsp;&nbsp;</em></div>
                        <h5>{{m.price_info}}</h5>
                    </div>
                  <div class="clear"></div>
	              </a>
                <em class="add" @click="CartData(m)">+</em>
                <div class="moreicon3">
                      <span class="font" style="background-color:#ffffff;color:#ffd040;">{{m.category_tips.txt}}</span>
                  </div>
            </div>
            <img v-bind:src="i[1][0].sale_as[0].bannerimg">
        </div>
    </div>

</template>
<script>
    import eventHub from '../router/bus.js';
    export default{
      data (){
        return{
          drinkData:[]
        }
      },
      mounted (){
        this.$http.get("../static/rupin.json").then(function(res){
            this.drinkData=JSON.parse(res.bodyText).data.blocks;
            console.log(this.drinkData[0])
        })
      },
      methods : {
        CartData:function(m){
          eventHub.$emit("add",m);
          document.querySelector(".footer_allNum").style.display = "block";
        }
      }
    }
</script>
<style lang="css">
    .drink{
      margin-top: 5.5rem;
    }
    .prolist>img{
      width: 100%;
      height: 7rem;
    }
    .prolist>img:nth-of-type(2){
      width: 100%;
      height: 1.5rem;
    }
    .pro{
      border-bottom: 0.02rem solid #cacaca;
      margin: 0.5rem 0 0 0;
      position: relative;
    }
    .pro .fl {
      width: 6rem;
      height: 5rem;
      margin: 0 0 0 2%;
    }
    .fl {
      float: left;
    }
    .pro .fr {
      width: 50%;
      margin: 0 2% 0 2%;

    }
    .fr {
      float: right;
    }
    .clear {
      clear: both;
      font-size: 1px;
      height: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
    }
    .moreicon3 {
      margin: 0;
      padding: 0 0 0 0.05rem;
      border-top: 0.02rem dashed #cacaca;
      height: 1.6rem;
      line-height: 1.6rem;
      font-size: 1rem;
      color: #a3a6a8;
    }
    .wdpro {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .pro a img.proImg {
      width: 100%;
    }
    .moreicon3 img {
      width: 5rem;
      vertical-align: middle;
      margin: 0 0 0 0.5rem;
    }
    .pro .add {
      position:absolute;
      right: 0.5rem;
      bottom: 2rem;
      line-height: 2rem;
      height: 2rem;
      overflow: hidden;
      background: #ffd040;
      border-radius: 1rem;
      z-index:5;
      display: block;
      width: 2rem;
      color: #424644;
      text-align: center;
      cursor: pointer;
      font-style: normal;
      font-size: 1.5rem;
    }
    .pro .gw_num em {
      display: block;
      height: 2rem;
      line-height: 2rem;
      width: 1rem;
      float: left;
      color: #424644;
      text-align: center;
      cursor: pointer;
      font-style: normal;
      font-size: 1rem;
      text-indent: -9999px;
    }
    .pro .fr h3 {
      font-size: 0.6rem;
      color: #3e3d3d;
    }
    .pro .fr h4 {
      font-size: 0.6rem;
      color: #a3a6a8;
      margin-top: 0.2rem;
    }
    .pro a .jg-bq {
      font-size: 0.2rem;
      color: #fc6137;
      margin: 0.2rem 0 0 0;
    }
    .pro a .jg-bq strong {
      font-size: 1rem;
    }
    .pro a h5 {
      font-size: 0.4rem;
      color: #424644;
    }
</style>
